
<script setup lang="jsx">
import { ref,onMounted } from 'vue';
import { getProjectList, projectDelete } from '@/api/serve'
//引入列表页组件
import TableList from './components/TableList.vue'
//引入搜索框组件
import SearchForm from './components/SearchForm.vue'
//引入对话框组件
import DialogForm from './components/DialogForm.vue'

const data = ref([]);
const total = ref(0);
const dataLoading = ref(false) // 加载中

const pagination = ref({
  pageSize: 10,
  pageNum: 1
})

//=============================================================
//重置搜索框
const handleReset=()=>{
  //重置页码
  pagination.value={
    pageSize: 10,
    pageNum: 1
  }
  //重新查询列表
  getList();
}
//搜索
const handleSearch=()=>{
  getList();
}
//清空
const handleClear=(val)=>{
  if(val==='name'){
    delete pagination.value.name
  }else{
    delete pagination.value.status
  }
  getList();
}

//=============================================================

//=========================操作：删除、编辑、禁用================
//删除护理项目
const deleteproject = async (id)=>{
  const result = await projectDelete(id)
  getList()
}


//获取护理项目详情
const getProjectById= async (id)=>{
  const result = await getProjectDetails(id)
  data.value = result.data.records
  getList()
}

//编辑护理项目
const editproject = async ()=>{
  const result = await projectUpdate(id)
  getList()
}
//=================================================================

//============================对话框===============================

const visible = ref(false)
//关闭对话框
const handleClose = ()=>{
  visible.value = false
}
//打开对话框
const handleOpen = ()=>{
  visible.value = true
}

//============================对话框===============================


//=============================================================
//生命周期
onMounted(() => {
  getList()
})

//调用接口
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}

// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}

//判断当前参数是否包含小数点
const isDecimals = (val) => {
  if (String(val).indexOf('.') > -1) {
    return true;
  }
  return false;
}

</script>



<template>
  <div class="min-h serveProject bg-wt">

    <!-- 展示搜索框页面 -->
    <SearchForm :searchData="pagination" @handleClear="handleClear" @handleReset="handleReset"
      @handleSearch="handleSearch"
    ></SearchForm>

    <!-- 展示列表页面 定义属性和方法-->
    <TableList
    :data="data"
    :total="total"
    :pagination="pagination"
    :dataLoading="dataLoading"
    @onPageChange="onPageChange"
    @handleOpen="handleOpen" 
    @deleteproject="deleteproject"
    @getProjectById="getProjectById"
    @editproject="editproject"
    ></TableList>
  
    <!-- 展示弹窗 -->
    <DialogForm 
        :visible="visible" 
        @handleClose="handleClose"
    ></DialogForm>
  </div>
</template>